<template>
  <div class="userEdit">
    <Header title="账号管理" />
    <div class="input-item">
      <van-field v-model="nickName" label="昵称" placeholder="请输入名称" />
      <van-field
        v-model="introduceSign"
        label="个性签名"
        placeholder="请输入签名"
      />
      <van-field v-model="password" label="密码" placeholder="请输入密码" />
    </div>
    <van-button
      type="primary"
      block
      class="save-btn"
      round
      color="#ffc400"
      @click="save"
      >保存</van-button
    >
    <van-button type="primary" block class="save-btn" round color="#ffc400" @click="logout">
      退出登录
    </van-button>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import Header from "../../components/Header.vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  components: { Header },
  setup() {
    let router = useRouter();
    let data = reactive({
      nickName: "",
      password: "",
      introduceSign: "授人以鱼不如授人以渔",
    });

    //保存按钮
    const save = () => {
      let newList = [];
      if (data.nickName && data.password) {
        const newUserInfo = {
          用户名: data.nickName,
          密码: data.password,
        };
        newList.push(newUserInfo);
        localStorage.setItem("userInfoList", JSON.stringify(newList));
        Toast("保存成功");
        router.push("./mine");
      } else {
        Toast("请输入修改的内容");
      }
    };

    //退出登录
    const logout=()=>{
        localStorage.removeItem("isLogin");
        Toast("退出登录成功")
        router.push("./register")
    }
    return {
      ...toRefs(data),
      save,
      logout
    };
  },
};
</script>

<style lang="less" scoped>
:deep(.van-button--danger) {
  background-color: #ffc400;
  border-color: #ffc400;
}
.save-btn {
  width: 80%;
  margin: 20px auto;
}
</style>